<template>
  <div class="room-log">
        <Breadcrumb :pathContent="content"/>
        <div class="room-content">
            <el-form :inline="true" :model="formInline" class="demo-form-inline searchInput">
                    <el-form-item label="酒店">
                            <div data-v-72d140a5="" class="el-input">
                            <input autocomplete="off" placeholder="请输入酒店名称" type="text" rows="2" validateevent="true" class="el-input__inner" v-model="sendData.saleHotelId" @keyup.enter="search">
                            </div>
                    </el-form-item>
                     <el-form-item label="房型">
                            <!-- <el-input v-model="sendData.saleRoomId" placeholder="请输入房型姓名"></el-input> -->
                            <div data-v-72d140a5="" class="el-input">
                            <input autocomplete="off" placeholder="请输入房型姓名" type="text" rows="2" validateevent="true" class="el-input__inner" v-model="sendData.saleRoomId" @keyup.enter="search">
                            </div>
                        </el-form-item>
                    <el-form-item label="类型">
                        <el-select v-model="sendData.type" clearable placeholder="请选择" @change="search">
                            <el-option label="全部类型" :key="0" :value="null">全部类型</el-option>
                            <el-option label="房态" :key="0" :value="0">房态</el-option>
                            <el-option label="房价" :key="1" :value="1">房价</el-option>
                            <el-option label="房量" :key="2" :value="2">房量</el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="操作时间" >
                            <el-date-picker
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            style="width: 210px;height:34px"
                            value-format="yyyy-MM-dd"
                            @change="search">
                            </el-date-picker>
                    </el-form-item>
                   <el-form-item label="操作人">
                            <!-- <el-input v-model="sendData.operator" placeholder="请输入操作人姓名"></el-input> -->
                            <div data-v-72d140a5="" class="el-input">
                            <input autocomplete="off" placeholder="请输入操作人姓名" type="text" rows="2" validateevent="true" class="el-input__inner" v-model="sendData.operator" @keyup.enter="search">
                            </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="search-button">
                        <el-button type="primary" @click="search"><i class="el-icon-search"></i></el-button>
                        </div>
                    </el-form-item>
            </el-form>
            <el-form>
                <el-form-item>
                    <el-table
                        :data="tableData"
                        style="width: 100%"
                        max-height="450">
                        <el-table-column
                        prop="saleHotelName"
                        label="酒店名称"
                        width="20%">
                        </el-table-column>
                        <el-table-column
                        prop="saleRoomName"
                        label="房型名称"
                        width="10%">
                        </el-table-column>
                        <el-table-column
                        prop="type"
                        label="类型"
                        width="15%">
                        </el-table-column>
                        <el-table-column
                        prop="content"
                        label="变更内容"
                       width="20%">
                        </el-table-column>
                        <el-table-column
                        prop="dateSpan"
                        label="变更时间"
                        width="20%">
                        </el-table-column>
                        <el-table-column
                        prop="operator"
                        label="操作人"
                       width="20%">
                        </el-table-column>
                        <el-table-column
                        prop="createTime" 
                        label="操作时间"
                       width="20%">
                        </el-table-column> 
                    </el-table>
                </el-form-item>
                <el-form-item style="margin-top: 20px;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="sendData.pageNo"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="sendData.pageSize"
                        layout="total, prev , pager , next, sizes, jumper"
                        :total="sendData.total">
                    </el-pagination>    
                </el-form-item>  
            </el-form>
      </div>
  </div>
</template>
<script>
import { getRoomListLog } from '../../public/js/saleRoom'
const Breadcrumb = () => import('@/components/common/Breadcrumb')

export default {
  name: 'Message',
  data () {
    return {
      content: {
        firstTitle: '房型',
        secondTitle: '房型日志',
        type: 'close'
      },
      centerDialogVisible: false,
      tableData: [],
      time: [],
      sendData: {
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.getRoomListLog()
  },
  methods: {
    getRoomListLog () {
      this.sendData.start = this.time[0] || null
      this.sendData.end = this.time[1] || null
      getRoomListLog(this.sendData).then(res => {
        this.tableData = res.data.roomLogEntities
        this.sendData.total = res.data.total
      })
    },
    search () {
      this.getRoomListLog()
    },
    handleSizeChange (val) {
      this.sendData.pageSize = val
      this.getRoomListLog()
    },
    handleCurrentChange (val) {
      this.sendData.pageNo = val
      this.getRoomListLog()
    }
  },
  components: {
    Breadcrumb
  }
}
</script>
<style lang="scss" scoped>
    .room-log {
        .el-form-item {
            margin-bottom: 20px;
            margin-right: 20px;
        }
        .search-button {
            button {
              padding: 9px 21px;
            }
        }
    }
    .edit-dialog {
        .edit-content {
            overflow: hidden;
            min-height: 100px;
            .content-left, .content-right {
                float: left;
            }
            .content-left {
                width: 32%;
                margin-right: 10px;
            }
            .content-right {
                width: 60%;
            }
            .content-footer {
                margin-top: 35%;
                button {
                    font-size: 12px;
                    padding: 10px 15px;
                }
            }
        }
    }
    .room-content {
        background-color: white;
        padding: 20px;
        position: relative;
        .el-form {
            .el-form-item {
                .el-form-item__content {
                    line-height: 3;
                    .el-dropdown {
                        float: left;
                        margin-right: 30px;
                    }
                    .el-input {
                    //   float: left;
                    //   width: 72% !important;
                      width: 180px;
                      
                  }
                  .el-pagination {
                        text-align: right;
                        .el-pagination__jump {
                            .el-input {
                                float: none!important;
                                width: 50px!important;
                            }
                        }
                    }
                    .el-table__header,.el-table__body{
                        width: 100%!important;
                    }
                }
            }
        }
    }
    .el-popper[x-placement^=bottom] {
        width: 100px!important;
        padding: 0;
    }   
    .el-popper[x-placement^=bottom] .el-form-item .el-form-item__content .title {
        background-color: rgb(241, 243, 248);
        text-align: left;
        padding-left: 20px;
        h1 {
           font-size: 14px;
        }
    }
    .el-popper[x-placement^=bottom] .el-form-item .el-form-item__content .radio-style {
        padding: 20px;
        text-align: center;
        overflow: hidden;
        .radio-left, .radio-right {
            float: left;
            width: 50%;
        }
    }
</style>
